<script setup lang="ts">
//联系客服
import Online from "@/assets/base/serve/link/contact-online.png";
import Online2x from "@/assets/base/serve/link/contact-online@2x.png";

import Weibo from "@/assets/base/serve/link/contact-weibo.png";
import Weibo2x from "@/assets/base/serve/link/contact-weibo@2x.png";

import Weixin from "@/assets/base/serve/link/contact-weixin.png";
import Weixin2x from "@/assets/base/serve/link/contact-weixin@2x.png";

import Jd from "@/assets/base/serve/link/contact-jd.png";
import Jd2x from "@/assets/base/serve/link/contact-jd@2x.png";

import Tmall from "@/assets/base/serve/link/contact-tmall.png";
import Tmall2x from "@/assets/base/serve/link/contact-tmall@2x.png";

const getImage = (image: string, image2x: string) => ({
  normal: `url(${image})`,
  retina: `url(${image2x})`,
});

const imgOnline = getImage(Online, Online2x);
const imgWeibo = getImage(Weibo, Weibo2x);
const imgWeixin = getImage(Weixin, Weixin2x);
const imgJd = getImage(Jd, Jd2x);
const imgTmall = getImage(Tmall, Tmall2x);
const fourData = [
  {
    id: 1,
    class: "online",
    title: "在线客服",
    time: "9:00 - 18:00",
    link: "#",
  },
  {
    id: 2,
    class: "weibo",
    title: "微博客服",
    time: "9:00 - 18:00",
    link: "#",
  },
  {
    id: 3,
    class: "wechat",
    title: "微信客服",
    time: "9:00 - 18:00",
    link: "#",
  },
  {
    id: 4,
    class: "jingdong",
    title: "京东客服",
    time: "9:00 - 18:00",
    link: "#",
  },
  {
    id: 4,
    class: "tianmao",
    title: "天猫客服",
    time: "9:00 - 18:00",
    link: "#",
  },
];
</script>
<template>
  <div class="box box-official">
    <header class="title-header">
      <h5 class="title">联系客服</h5>
    </header>
    <div class="panel-content">
      <ul class="banner-list clearfix">
        <li v-for="item in fourData" :key="item.id" :class="item.class">
          <h3 class="title">{{ item.title }}</h3>
          <p class="time">{{ item.time }}</p>
          <a target="_self" :href="item.link"></a>
        </li>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="less">
.box .banner-list > li {
  float: left;
  box-sizing: border-box;
  border-right: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
}
.box .banner-list > li:last-child {
  border-right: 0;
}
.box-official .banner-list {
  > li {
    position: relative;
    width: 20%;
    text-align: center;
    padding: 160px 0 70px;
    border-bottom: 0;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: 60px auto;
    background-position: center 75px;
    .title {
      font-size: 16px;
      line-height: 1em;
      color: #333;
      margin-bottom: 12px;
    }
    .time {
      font-size: 12px;
      line-height: 1em;
      color: #999;
    }
    a {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
  > li.online {
    --bg-image: v-bind(imgOnline.normal);
    --bg-image-2x: v-bind(imgOnline.retina);
    background-image: var(--bg-image);
    background-image: -webkit-image-set(
      var(--bg-image) 1x,
      var(--bg-image-2x) 2x
    );
  }
  > li.weibo {
    --bg-image: v-bind(imgWeibo.normal);
    --bg-image-2x: v-bind(imgWeibo.retina);
    background-image: var(--bg-image);
    background-image: -webkit-image-set(
      var(--bg-image) 1x,
      var(--bg-image-2x) 2x
    );
  }
  > li.wechat {
    --bg-image: v-bind(imgWeixin.normal);
    --bg-image-2x: v-bind(imgWeixin.retina);
    background-image: var(--bg-image);
    background-image: -webkit-image-set(
      var(--bg-image) 1x,
      var(--bg-image-2x) 2x
    );
  }
  > li.jingdong {
    --bg-image: v-bind(imgJd.normal);
    --bg-image-2x: v-bind(imgJd.retina);
    background-image: var(--bg-image);
    background-image: -webkit-image-set(
      var(--bg-image) 1x,
      var(--bg-image-2x) 2x
    );
  }
  > li.tianmao {
    --bg-image: v-bind(imgTmall.normal);
    --bg-image-2x: v-bind(imgTmall.retina);
    background-image: var(--bg-image);
    background-image: -webkit-image-set(
      var(--bg-image) 1x,
      var(--bg-image-2x) 2x
    );
  }
}
</style>
